<template>
    <div class="mainBox">
        <PageHeaderNav content="立刻知药" :need-back="false" :need-underline="false"></PageHeaderNav>
        <div class="content">
            <search-bar></search-bar>
            <div class="buttonArea">
                <div class="photoSearch btnFocus" @click.stop="takePhoto('medicine')">
                    <div class="text speech">
                        <h1>拍照搜索</h1>
                        <p>拍药盒即可识别了解</p>
                    </div>
                    <img src="@/assets/images/searchView/camera.png" alt="">
                </div>
                <div class="compositionSearch btnFocus" @click.stop="takePhoto('composition')">
                    <div class="text speech">
                        <h1>成分解读</h1>
                        <p>拍一拍商品成分表</p>
                    </div>
                    <img src="@/assets/images/searchView/composition.png" alt="">
                </div>
                <div class="aiChat btnFocus" @click.stop="toAiChat">
                    <div class="text speech">
                        <h1>快问快答</h1>
                        <p>你的私人AI助手</p>
                    </div>
                    <img src="@/assets/images/searchView/ai3.png" alt="">
                </div>
            </div>
            <div style="clear:both"></div>
            <div class="aui-list-item">
                <list-button
                    class="speech"
                    v-for="button in listButton"
                    :content="button.content"
                    :to-router="button.toRouter"
                    :img="button.img"
                />
            </div>
        </div>
        <input type="file" accept="image/*" capture="environment" id="camera">
    </div>
</template>

<script>
import SearchBar from '@/components/Search/SearchBar.vue'
import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";
import ListButton from "@/components/Search/ListButton.vue";

export default {
    components: {
        SearchBar,
        PageHeaderNav,
        ListButton
    },
    data() {
        return {
            listButton: [
                {
                    img: require("@/assets/images/userView/relation.png"),
                    content: "监护管理",
                    toRouter: "/userView/bindRelationshipView"
                },
                {
                    img: require("@/assets/images/userView/note.png"),
                    content: "功能设置",
                    toRouter: "/userView/settingView"
                },
                {
                    img: require("@/assets/images/userView/default.png"),
                    content: "个人中心",
                    toRouter: "/userView"
                },
            ]
        }
    },
    methods: {
        // 拍照搜索
        takePhoto(searchType) {
            let camera = this.$('#camera')
            camera.click()
            camera.bind("change", async () => {
                // 上传照片，并返回内容
                let formData = new FormData()
                let imageFile = camera[0].files[0] || null

                if (!imageFile) return this.$message({
                    message: '未选中',
                    type: 'warning'
                })

                // 跳转搜索内容页面
                this.$store.commit("PhotoResultModule/init")
                this.$store.commit("PhotoResultModule/changeAllowRouter", true)
                this.$router.push("/searchResultView/")

                // 图片压缩
                this.$message({
                    message: '正在压缩照片...',
                    type: 'success'
                })
                imageFile = await this.$public.cutImage(imageFile, 1024 * 1024)

                formData.append("imageFile", imageFile)
                formData.append("searchType", searchType)

                // 文件读取
                let reader = new FileReader()
                reader.readAsDataURL(imageFile)

                this.request.post("/searchEngines/photoRecognition/", formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                }).then((response) => {
                    const status = response["code"] === 200

                    if (status) {
                        this.$store.commit("PhotoResultModule/changeIsLoading", false)

                        const searchResult = response["data"]["searchResult"]
                        this.$store.commit("PhotoResultModule/changePageInfo", {
                            searchType: searchType === "medicine" ? "药品说明" : "商品成分解读",
                            searchResult: searchResult,
                            photo: reader.result
                        })
                    } else {
                        setTimeout(() => {
                            this.$router.push("/searchView/")
                        }, 1500)
                    }
                })

                // 搜索结果页 显示搜索图片
                reader.onload = () => {
                    this.$store.commit("PhotoResultModule/changePhoto", reader.result)
                }
            })
        },

        toAiChat() {
            this.$router.push("/aiChat/")
        }
    }
}
</script>

<style lang="less" scoped>
#camera {
    display: none;
}

.mainBox {
    width: 100%;
    height: 100%;
    margin: auto;

    .content {
        width: 100%;
        height: calc(100% - 65px);
        box-sizing: border-box;
        padding: 15px 15px;
        background-color: var(--grayColor);
        overflow-y: scroll;
    }
}

.buttonArea > div {
    box-sizing: border-box;
    border-radius: 15px;
    margin-top: 15px;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    img {
        filter: grayscale(100%) brightness(1000%)
    }
}

.buttonArea > div .text h1 {
    margin-bottom: 8px;
}

.photoSearch {
    width: 100%;
    height: 175px;
    background-color: var(--color);

    img {
        width: 110px;
    }
}

.compositionSearch {
    width: 48%;
    height: 110px;
    background-color: #f1ca05;
    font-size: 0.7rem;
    float: left;

    img {
        width: 55px;
    }
}

.aiChat {
    width: 48%;
    height: 110px;
    background-color: rgb(30, 143, 243);
    font-size: 0.7rem;
    float: right;

    img {
        width: 55px;
    }
}

.aui-list-item {
    width: 100%;
    box-sizing: border-box;
    margin: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>